vue-router 攻略

发表于

一、简介

1.1 作用

专为 vue 开发 SPA 单页应用时所提供的插件，能够让我们可以使用前端路由控制组件的渲染，减少重复性的 HTTP 请求。

1.2 基本原理

普通的页面跳转都是由后端来控制的，我们可以修改浏览器地址栏的url，或者修改location.href值，向服务器发送请求切换页面。

如果我们仅仅修改url中的hash值，浏览器是不会向页面发出请求的。

  • vue-router的运作原理就是利用hash的变化实现组件的动态切换，达到切换页面效果的目的
  • vue-router内部使用了hash与H5两种方式

1.3 基本使用

1
2
3
4
5
6
<div id="app">
    <header></header>
    <!-- 占位标签，路由变化时会动态切换组件，作用类似与component标签 -->
    <router-view></router-view>
    <footer></footer>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 全局登陆组件
let LoginComponent = {
    template: '<h4>登陆</h4>'
};
// 全局注册组件
let RegisterComponent = {
    template: '<h4>注册</h4>'
});
// 实例
var vm = new Vue({
    el: '#app',
    // 路由配置
    router: new VueRouter({
        routes: [
            { path: '/login', component: LoginComponent },
            { path: '/register', component: RegisterComponent }
        ]
    })
});

二、路由实例与路由对象

2.1 说明

  • 配置了路由之后，在vue实例与组件身上会被注入两个对象$router与$route
  • $router为new VueRouter()得到的实例，里面记录了路由配置信息，并提供了一些方法供我们调用
  • $route为页面hash值解析后的一个对象，有点类似于node中url.parser(req.url)的返回结果，可以通过它拿到 URL# 后面的参数。

2.2 $route常用属性

  • 注意：下面的属性都是对页面location.hash值进行的解析提取，不是location.href
  • fullPath：完整路径，包含query与hash
  • path：纯路径
  • query：查询字符串解析后得到的对象
  • params：路径参数解析后得到的对象
  • name：当前路由配置的name属性

2.3 使用路由参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 全局详情组件
var comDetails = Vue.extend({
    template: '<article>详情</article>',
    created: function() {
        let id = this.$route.params.id;
        console.log(this.$route, id);
    }
});
// 实例
var vm = new Vue({
    el: '#app',
    // 路由配置
    router: new VueRouter({
        routes: [
          // : 后面的 id 可以通过 $route.params.id | $route.params.uid 获取到
            { path: '/details/:id/:uid', component: 'v-details' }
        ]
    })
});

三、跳转页面

3.1 标签跳转

如果要通过点击页面元素实现页面跳转可以使用router-link标签，router-link标签最终会被替换为普通的a标签，但router-link标签使用更灵活，会直接拼接到 # 后面，用原生a标签写的话<a href='#/login'></a> 要手动加一个 # 号。

写法1：

1
<router-link to="/login?keyword=1122">演示</router-link>

写法2：

1
<router-link :to="{ path: '/login', query: { keyword: 1122 } }">演示</router-link>

写法3：

1
<router-link :to="{ name: 'go', query: { keyword: 1122 } }">演示</router-link>

示例

1
2
3
4
5
6
7
8
9
<div id="app">
    <header>
        <router-link to="/login?a=1">登陆-路径</router-link>
        <router-link :to="{ name: 'go', query: {b: 2} }">登陆-别名</router-link>
    </header>
    <!-- 占位标签，路由变化时会动态切换组件，作用类似与component标签 -->
    <router-view></router-view>
    <footer></footer>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 全局登陆组件
Vue.component('v-login', {
    template: '<h4>登陆</h4>'
});
// 实例
var vm = new Vue({
    el: '#app',
    // 路由配置
    router: new VueRouter({
        routes: [
            { name: 'go', path: '/login', component: 'v-login' }
        ]
    })
});

3.2 js 跳转

如果向通过 js 来实现页面跳转可以使用 $router.push 方法

写法1：

1
this.$router.push('/login')

写法2：

1
this.$router.push({path:'/login', query:{aa:11}})

写法3：

1
this.$router.push({name:'details', params:{id:1}, query:{aa:11}})

写法4：

1
this.$route.go(-1)  // 后退，1为前进

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 实例
var vm = new Vue({
    el: '#app',
    method: {
        to: function(path) {
            this.$router.push(path);
        }
    },
    // 路由配置
    router: new VueRouter({
        routes: [
            { path: '/login', component: 'v-login' },
            { name: 'details', path: '/details/:id', component: 'v-details' },
        ]
    })
});
vm.$router.push('/login');
vm.$router.push({path:'/login', query:{aa:11}});
vm.$router.push({name:'details', params:{id:1}, query:{aa:11}});

3.3 重定向

1
2
3
4
5
6
7
8
9
new VueRouter({
    routes: [
        // 访问根路径时重定向到index
        { path: '/', redirect: '/index' }
        // 也可以使用名字进行重定向
        { path: '/', redirect: { name: 'i' } },
        { path: '/index', component: IndexComt },
    ]
})

四、监听路由变化

1
2
3
4
5
6
7
8
9
10
new Vue({
    el: '#app',
    watch: {
        $route: function(to, from) {
            console.log(`${from.path}跳转到了${to.path}`);
        }
    },
    // 路由配置
    router: router
});

五、嵌套路由

5.1 说明

项目中有时候会出现组件嵌套组件的情况，这些子组件也要根据url进行动态切换，那么就需要嵌套配置

注意：嵌套配置时子路由path自动继承父路由path的path，配置时不要在前面加’/‘

5.2 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let Compt1 = Vue.extend({
    template: '<p>子组件1</p>'
});
let Compt2 = Vue.extend({
    template: '<p>子组件2</p>'
});
let ComptContent = Vue.extend({
    template: `
    <div>
        <p>父级组件</p>
        <router-view></router-view>
    </div>`
});
// 路由配置
let router = new VueRouter({
    routes: [
        { path: '/page', component: ComptContent,
          children: [
            { path: 'one', component: Compt1 },
            { path: 'two', component: Compt2 }
          ]
        }
    ]
});
// 实例
var vm = new Vue({
    el: '#app',
    router: router
});
本文结束，感谢您的阅读